<!-- @author zhengjie -->
<template>
    <div class="crate-box">
        <div class="crate-head">
            <img class="head-img" src="@/assets/images/rooms.png" />
            <div class="head-text">新疆基地-机箱1设备</div>
        </div>
        <div class="crate-end">
            <div class="end-state">在线</div>
            <div class="end-button">
                <img src="@/assets/images/amend.png" />
                <img src="@/assets/images/delete-yellow.png" />
                <img src="@/assets/images/xs.png" />
                
                <el-popover placement="top-start" popper-class="zt-popper" width="200" trigger="click"
                   >
                    <template #reference>
                        <div class="flex-s">
                            <img src="@/assets/images/xs.png"
                            style="cursor: pointer;">
                            <div class="end-details">详情</div>
                        </div>
                        
                    </template>
                    <template  #default>
                        <div class="flex">
                            <div>
                                <!-- <div v-for="(item, index) in sensorAttribute" :key="index" style="color: #25CAD5;">
                                    {{ item.name }}:{{ item.value }}
                                </div> -->
                            </div>
                        </div>
                    </template>
                </el-popover>
            </div>
        </div>
    </div>
</template>
  
<script>
export default {
    name: 'Camera',
    dicts: ['sensor_code'],
    props: {
        // options: {//全部数据
        //     type: Array
        // },
        // optArray: {//选中数据 
        //     type: Array,
        // },
        // type: {
        //     type: Boolean,
        // },
    },
    watch: {

    },
    data() {
        return {
            value: [],

        }
    },
    methods: {
        closeDialog() {//关闭回调
            this.$emit("closeDialog", false);
        },
        parseJsonString(jsonString) {
      // console.log(jsonString);
      const string = JSON.parse(jsonString);
      const sensorCodeArray = this.dict.type.sensor_code;
      console.log(JSON.stringify(sensorCodeArray));
      const resultArray = sensorCodeArray
        .filter(sensor => string.hasOwnProperty(sensor.value))
        .map(sensor => ({ name: sensor.label, value: parseInt(string[sensor.value]) / 10 }));

      // console.log(JSON.stringify(resultArray));

      // const arr = [
      //   {"name":"W湿度","value":62.9},{"name":"N温度","value":8.3},{"name":"N湿度","value":61.5},
      //   {"name":"风速","value":60},{"name":"风向","value":'西北风'},{"name":"雨量","value":61.5},
      //   {"name":"W温度","value":80},{"name":"风力","value":'100'}
      // ]

      // const arrs = [
      //   {"name":"室外湿度","value":"62.9Pa","type":0},{"name":"室内温度","value":"88.3℃","type":1},{"name":"室内湿度","value":"61.Pa","type":0},
      //   {"name":"风速","value":"60m/s","type":0},{"name":"风向","value":'西北风',"type":0},{"name":"雨量","value":"61.5mm","type":0},
      //   {"name":"室外温度","value":"70℃","type":0},{"name":"风力","value":'100级',"type":0}
      // ]

      // 将arr数组转为arrs数组，w表示室外，n表示室内，温度的单位是℃，雨量的单位是mm，湿度的单位是Pa，风力的单位是级...type的值为0表示正常，当温度大于80的时候为异常type的值应该为1



      return this.transformArray(resultArray);

    },
    }
}
</script>
  
<style rel="stylesheet/scss" lang="scss" scoped>
.crate-box {
    background-color: #3A4156;
    padding: 5px;
    width: 240px;
    height: 80px;
    border-radius: 5px;
    color: #9A9DAA;

    .crate-head {
        width: 220px;
        height: 35px;
        margin-left: 5px;
        margin-top: 10px;
        display: flex;
        justify-content: center;

        .head-img {
            height: 25px;
            width: 25px;
            margin-right: 10px;
        }

        .head-text {
            font-size: 18px;
            width: 180px;
            white-space: nowrap;
            /* 防止文本换行 */
            overflow: hidden;
            /* 超出部分隐藏 */
            text-overflow: ellipsis;
            /* 超出部分显示省略号 */
        }
    }

    .crate-end {
        width: 220px;
        height: 35px;
        margin-left: 8px;
        display: flex;
        justify-content: center;

        .end-state{
            width: 60px;
        }
        .end-button {
            width: 180px !important;
            display: flex;
            justify-content: center;
            text-align: right;
            margin-left: auto;

            img {
                margin-top: 2px;
                height: 18px;
                width: 18px;
                margin-left: 15px;
            }

            .end-details {
                margin-right: 5px;
                font-size: 14px;
                line-height: 24px;
                margin-left: 2px;
            }
        }
    }
}</style>
  